import * as echarts from "echarts";
import { useEffect } from "react";
export default function Rank() {
  useEffect(() => {
    var chartDom = document.getElementById("rank");
    // 获取实例
    var myChart = echarts.getInstanceByDom(chartDom);
    if (!myChart) {
      // 如果不存在则创建{myChart = echarts.init(chartDom)
      myChart = echarts.init(chartDom);
    }

    var option = {
      color: ["#2f89cf"],
      tooltip: {
        trigger: "axis",
        axisPointer: {
          // 坐标轴指示器，坐标轴触发有效
          type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
        },
      },
      grid: {
        left: "0%",
        top: "10px",
        right: "0%",
        bottom: "4%",
        containLabel: true,
      },
      xAxis: [
        {
          type: "category",
          data: [
            "旅游行业",
            "教育培训",
            "游戏行业",
            "医疗行业",
            "电商行业",
            "社交行业",
            "金融行业",
          ],
          axisTick: {
            alignWithLabel: true,
          },
          axisLabel: {
            color: "rgba(255,255,255,.6)",
            fontSize: "12",
          },
          axisLine: {
            show: false,
          },
        },
      ],
      yAxis: [
        {
          type: "value",
          axisLabel: {
            color: "rgba(255,255,255,.6)",
            fontSize: "12",
          },
          axisLine: {
            lineStyle: {
              color: "rgba(255,255,255,.1)",
              // width: 1,
              // type: "solid"
            },
          },
          splitLine: {
            lineStyle: {
              color: "rgba(255,255,255,.1)",
            },
          },
        },
      ],
      series: [
        {
          name: "直接访问",
          type: "bar",
          barWidth: "35%",
          data: [200, 300, 300, 900, 1500, 1200, 600],
          itemStyle: {
            borderRadius: 5,
          },
        },
      ],
    };

    // 把配置给实例对象
    myChart.setOption(option)
  });

  return (
    <div className="panel rank">
      <h2>柱状图 排名</h2>
      <div
        className="chart"
        id="rank"
        style={{ width: "430px", height: "260px" }}
      ></div>
      <div className="panel_footer"></div>
    </div>
  );
}
